
import {
  queryPlotFileAxios,
  getPlotFileDataAxios,
} from "@/data";

export default {
  data() {
    return {
      plotID: '',
      iconColorList: Object.freeze({
        红: '#FF0000',
        蓝: '#0000FF',
        绿: '#00FF00',
        粉: '#FF60AF'
      }),
      optIconList: Object.freeze([
        { iconName: '新建', method: 'backDrawList' },
        { iconName: '导入', method: 'loadPlotData' },
        { iconName: '保存', method: 'savePlotData' },
        { iconName: '另存为', method: 'saveAsPlotData' },
        { iconName: '打印', method: 'printPlotData' }
      ]),
      positionLayoutList: Object.freeze({
        左下: 'lb-box',
        右下: 'rb-box',
        左上: 'lt-box',
        右上: 'rt-box'
      }),
      iconGroupJSON: {}, // 图标分组原始数据
      iconGroupList: [], // 可用图标分组
      currentIconGroup: '', // 当前图标分组
      currentIconList: [], // 当前图标列表
      currentDrawIcon: {}, // 当前绘制军标信息
      historyIcons: [], // 历史图标
      drawing: {
        地图信息: {
          军标信息: { data: [] },
          行政区划信息: [],
          自定义边界坐标: []
        },
        文字: {
          显示: false,
          边框: false,
          标题位置: '',
          内容: '',
          文字大小: 32,
          字体: '',
          位置: ''
        },
        图例: {
          显示: '',
          位置: '',
          内容: []
        },
        直角坐标系: false,
        边框: false,
        比例尺: {},
        指南针: {
          显示: false,
          位置: '右上'
        },
        历史图标: []
      },
      showConfigPanel: false,
      plotColor: '',
      direction: 'rtl',
      multiFlag: false,
      plotEditFlag: true,
      showCopy: false,
      isShowPpoup: false
    }
  },

  methods: {
    async openPlotFile(mapRef, plotID) {
      this.plotID = plotID
      await this.getPlotData(mapRef, plotID)
      this.$nextTick(() => {
        this.$refs.iPlotting.startPlotting(this.imap) // 初始化标绘层
        this.$refs.iPlotting.closePlotPanel()
        this.$refs.iPlotting.setPlotFileID(plotID)
        this.drawing.地图信息.军标信息.fileID = plotID
        this.setLoadData(this.drawing.地图信息.军标信息)
        // 根据hideLevel确定是否显示边界
        this.toggleByHideLevel()
      })
    },
    /**
     *  des: 地图标绘信息发生变化（添加或者删除）
     *  1. 重新获取当前的地图数据信息并赋值到drawing里面
     *  2. 将图例进行更新
     */
    plotUpdate(data) {
      const newPlotData = this.$refs.plotMap.getSaveData()
      this.$set(this.drawing.地图信息.军标信息, data, newPlotData.data)
      this.updateLegendList(newPlotData.data)
    },

    // 获取制图数据
    async getPlotData(mapRef, plotID = '') {
      if (plotID) {
        const baseInfo = JSON.parse(JSON.stringify(queryPlotFileAxios).replace(/None/g, null).replace(/True/g, true).replace(/False/g, false))
        this.formatDrawingInfo(baseInfo)
        const plotData = getPlotFileDataAxios
        const newPlotData = plotData.map((item) => {
          item.content = item.content.replace(/None/g, '""')
          item.content = item.content.replace(/'/g, '"')
          item.content = item.content.replace(/\n/g, '\\n')
          item.content = JSON.parse(item.content)
          return item.content
        })
        this.drawing.地图信息.军标信息.data = newPlotData
      } else {
        this.$message.error('未识别到信息')
      }
      return true
    },

    // 开启绘制图层
    openDrawLayer(mapRef = null) {
      this.startPlotting(true)
    },

    // 开启军标编辑面板
    changePlotEditStatus(val) {
      this.$refs.plotMap.showPlotPanel(val)
    },

    // 加载地图最佳视角
    loadBestView(mapRef = null, mapBaseInfo = {}) {
      if (mapBaseInfo.地图信息.自定义边界坐标.length > 0) {
        this.$refs[mapRef].showBBox(mapBaseInfo.地图信息.自定义边界坐标)
        this.$refs[mapRef].boxZoom(mapBaseInfo.地图信息.自定义边界坐标)
      } else {
        const len = mapBaseInfo.地图信息.行政区划信息.length
        if (len > 0) {
          const region = mapBaseInfo.地图信息.行政区划信息[len - 1]
          this.$refs[mapRef].setView(region)
          this.$refs[mapRef].boxZoom()
        }
      }
    },

    // 保存制图
    savePlot(mapRef, flag) {
      this.$refs[mapRef].savePlotData2DB()
      this.$refs[mapRef].savePlotFile2DB(this.drawing)
      this.$message.success('保存成功')
    },

    // 操作按钮-保存制图
    savePlotData() {
      this.savePlot('plotMap')
    },

    // 操作按钮-另存为制图
    saveAsPlotData() {
      this.showCopy = true
    },

    // 操作按钮-打印制图
    printPlotData() {
      this.isShowPpoup = true
    },

    // 图标组-获取图标库
    async getIconGroup() {
      await getIconGroup({ icon_group_id: 'default' }).then((res) => {
        res = res.data
        if (res.code === '000000') {
          this.iconGroupJSON = JSON.parse(res.data.ICON_GROUP)
          this.iconGroupList = this.iconGroupJSON.show // 获取分组列表
          this.changeGroup(this.iconGroupList[0]) // 切换图标组
        }
      })
    },

    // 图标组-切换图标组
    changeGroup(item) {
      this.currentIconGroup = item
      this.currentIconList = this.iconGroupJSON[item]
    },

    // 选中绘制图标
    clickPlotIcon(item, flag = true) {
      // 待处理历史图标
      this.$refs.plotMap.selectPlot(item.key)
      if (flag) {
        this.insertIconHistory(item)
      }
    },

    // 插入历史图标
    insertIconHistory(plotIcon = null) {
      if (!plotIcon) { return false }
      if (this.drawing.历史图标.length === 0) this.drawing.历史图标.push(plotIcon)
      else {
        this.drawing.历史图标.forEach((sort, index) => {
          if (plotIcon.label === sort.label) {
            this.drawing.历史图标.splice(index, 1)
          }
          if (this.drawing.历史图标.length > 12) this.drawing.历史图标.pop()
        })
        this.drawing.历史图标.unshift(plotIcon)
      }
    },

    /**
     *
     * @param {*} plotInfo
  *  - @param { } boundary 边界
  *  - @param { } compass 指南针
  *  - @param { } custom_boundary  自定义边界
  *  - @param { } has_rsc  直角坐标系
  *  - @param { } scale 比例尺
  *  - @param { } legend 图例
  *  - @param { } region 行政区划
  *  - @param { } plot_text 文字
  *  - @param { } RCS 参考坐标系
  *  - @param { } stroke_width 线宽
  *  - @param { } unit 标绘基本单位
  */
    formatDrawingInfo(plotInfo) {
      if (plotInfo.boundary) { }
      // 指南针
      if (plotInfo.compass) {
        plotInfo.compass = plotInfo.compass.replace(/'/g, '"')
        const newCompass = JSON.parse(plotInfo.compass)
        const show = (newCompass && newCompass.显示) ? newCompass.显示 : false
        const position = (newCompass && newCompass.位置) ? newCompass.位置 : ''
        this.$set(this.drawing, '指南针', { 显示: show, 位置: position })
      }

      // 自定义坐标边界
      if (plotInfo.custom_boundary) {
        plotInfo.custom_boundary = plotInfo.custom_boundary.replace(/'/g, '"')
        const newCustomBoundary = JSON.parse(plotInfo.custom_boundary)
        const { 自定义边界坐标, ...rest } = this.drawing.地图信息
        this.$set(this.drawing, '地图信息', { 自定义边界坐标: newCustomBoundary, ...rest })
      }

      // 直角坐标系
      const flag = plotInfo.has_rsc && plotInfo.has_rsc !== '0' && plotInfo.has_rsc !== 'False'
      this.$set(this.drawing, '直角坐标系', flag)

      // 图例
      if (plotInfo.legend) {
        plotInfo.legend = plotInfo.legend.replace(/'/g, '"').replace(/None/g, null).replace(/True/g, true).replace(/False/g, false)
        const newLegend = JSON.parse(plotInfo.legend)
        this.$set(this.drawing, '图例', newLegend)
      }

      // 文字
      if (plotInfo.plot_text) {
        plotInfo.plot_text = plotInfo.plot_text.replace(/'/g, '"')
        const newPlotText = JSON.parse(plotInfo.plot_text)
        this.drawing.文字 = newPlotText
      }

      // 比例尺
      if (plotInfo.scale) {
        plotInfo.scale = plotInfo.scale.replace(/'/g, '"')
        const newScale = JSON.parse(plotInfo.scale)
        this.$set(this.drawing, '比例尺', newScale)
      }

      // 行政区划信息
      if (plotInfo.region) {
        plotInfo.region = plotInfo.region.replace(/'/g, '"')
        const newRegion = JSON.parse(plotInfo.region)
        this.drawing.地图信息.行政区划信息 = newRegion
      }

      // RCS
      this.drawing.地图信息.军标信息.RCS = plotInfo.rcs || ''

      // stroke_width
      if (plotInfo.stroke_width) {
        this.drawing.地图信息.军标信息.strokeWidth = plotInfo.stroke_width || 2
      }

      // unit
      if (plotInfo.unit) {
        plotInfo.unit = plotInfo.unit.replace(/'/g, '"')
        const newUnit = JSON.parse(plotInfo.unit) || []
        this.drawing.地图信息.军标信息.unit = newUnit || [500, 500]
      }
    },

    // 打开抽屉
    openDrawer() {
      this.showConfigPanel = !this.showConfigPanel
      this.plotEditFlag = false
      this.changePlotEditStatus(false)
      this.plotUpdate()
      this.resizeMap()
    },

    // resize地图
    resizeMap() {
      this.$nextTick(() => {
        this.$refs.plotMap.mapRefresh()
      })
    },

    // 直角坐标系
    showGrid(st) {
      this.$refs.plotMap.toggleCoord(st)
    },

    // 指南针
    changeCompass(item) {
      this.drawing.指南针.位置 = item
    },

    // 图例编辑-图例显示
    changeLegend(item) {
      this.drawing.图例.位置 = item
    },

    // 模版编辑
    changeTemplate(flag) {
      this.drawing.文字.边框 = flag
      this.$nextTick(() => {
        this.$refs.plotMap.mapRefresh()
      })
    },

    // 军标编辑-改变军标颜色
    changeColor(col) {
      this.$refs.plotMap.selColor = col
      this.$refs.plotMap.onColorChange()
    },

    // 军标标记-改变军标大小
    changeSize(siez) {
      this.$refs.plotMap.plotScale(siez)
    }

  }
}
